<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="../include/laypublic.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>档案借阅申请新建</title>
</head>
<script type="text/html" id="borrow-tr">
<tr id="BORROWRow-{0}"  > 
<td>
	<span class="label" >{0}</span>
	<input type="hidden" value="{0}" name="showIdxList" />
</td>
<td>
<select name="docTypeList" lay-verify="required" >
<option value=""  >请选择</option>
<option value="01" >党群工作</option>
<option value="02" >行政管理</option>
<option value="03" >经营管理</option>
<option value="04" >基本建设</option>
<option value="05" >会计档案</option>
<option value="06" >人事档案</option>
<option value="07" >声像档案</option>
<option value="08" >实物档案</option>
</select>
<td><input type="text" value="{1}" name="docNameList" placeholder="请输入档案名称" lay-verify="required" autocomplete="off" class="layui-input " /></td> 
<td class="tg-c" >
	<button type="button" class="layui-btn layui-btn-sm del-row" ><i class="layui-icon">&#xe640;</i></button> 													
	<button type="button" class="layui-btn layui-btn-sm add-row" ><i class="layui-icon">&#xe654;</i></button>
</td> 							
</tr>
</script>
<style>

.fieldset {
	margin-top: 5px;
	margin-bottom: 0px
}

.layui-legend {
	background-color: #5fb878;
	font-size: 15px !important;
	width: 140px;
}

.layui-form-item {
	margin-bottom: 5px;
	clear: both;
	*zoom: 1;
}

.layui-form-label {
	width: 150px;
}

.scroll-wraper {
	width: 94.65%;
	margin-left: 1.65%;
	background-color: red;
}

.scroll-wraper .scroll-layui-table {
	width: 100%;
	margin: 0 auto;
	background-color: #e01010;
	overflow-x: auto;
	border-right: 1px solid #e6e6e6;
	box-shadow: 0 0 10px rgba(0, 0, 0, .12);
	display: flex;
	flex-direction: row;
}

.scroll-wraper .scroll-layui-table .scroll-layui-table-wraper-left {
	width: 12.75%;
	overflow-x: hidden;
	border-right: 1px solid #e6e6e6;
	box-shadow: 0 0 10px rgba(0, 0, 0, .12);
	background-color: blue;
}

.scroll-wraper .scroll-layui-table .scroll-layui-table-wraper-left .layui-table
	{
	width: 400px;
}

.scroll-wraper .scroll-layui-table .scroll-layui-table-wraper-right {
	width: 87.25%;
	background-color: yellow;
	overflow-x: auto;
	overflow-y: hidden;
	position: relative;
}

.scroll-wraper .scroll-layui-table .scroll-layui-table-wraper-right .scroll-layui-table-content
	{
	width: 3200px;
	display: block;
	background-color: #bbbbbb;
	position: absolute;
	left: 0px;
	top: 0px;
}

.scroll-layui-table .layui-table {
	margin: 0px;
}


.contract-list {
	margin-top: 20px;
}

.contract-box {
	width: 100%;
	min-height: 100px;
}

.contract-money {
	width: 94%;
	margin: 0 auto;
}

.contract-money .layui-table {
	margin: 0;
}

.contract-money th {
	text-align: center;
	height: 38px;
}

.contract-money .label {
	display: block;
	width: 45px !important;
	text-align: left;
	margin-left: 15px;
}

</style>
<body>
	<div class="layui-fluid" >
		<div class="layui-card">
			<div class="layui-tab-item layui-show">
				<div style="padding-top: 15px;">&nbsp;</div>
				<form class="layui-form" id="addInfo_form">
					<fieldset class="layui-elem-field layui-field-title fieldset" id="baseInfo">
						<legend class="layui-btn layui-legend" style="text-align: left; cursor: default;">档案借阅申请 ></legend>
						<div style="margin-top: 20px">
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">申请公司</label>
									<div class="layui-input-inline">
										<input type="hidden" name="hrOrgid" value="${bindOrgId}">
										<input type="text" value="${bindOrgName}" style="border: 0px;"
											readonly="readonly" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">申请部门</label>
									<div class="layui-input-inline">
										<input type="hidden" name="hrDeptid" value="${bindDeptId}">
										<input type="text" value="${bindDeptName}"
											style="border: 0px;" readonly="readonly" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">申请人</label>
									<div class="layui-input-inline">
										<input type="hidden" name="hrStaffApplyid"
											value="${SESSION_KEY_USER_DETAIL.hrStaffId }"> <input
											type="text" name="staffname" value="${staffName }"
											readonly="readonly" style="border: 0px" autocomplete="off"
											class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">借阅开始日期</label>
									<div class="layui-input-inline">
										<input type="text" value="" lay-verify="required"
											id="borrowStartDate" name="borrowStartDate" readonly="readonly"
											placeholder="请输入借阅开始日期" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">拟归还日期 </label>
									<div class="layui-input-inline">
										<input type="text" value="" lay-verify="required"
											id="borrowEndDate" name="willReturnDate" readonly="readonly"
											placeholder="请输入拟归还日期" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">借阅方式</label>
									<div class="layui-input-inline">
										<select name="borrowType" lay-verify="required">
											<option value="">请选择</option>
											<option value="01">查阅</option>
											<option value="02">借阅</option>
											<option value="03">电子版</option>
											<option value="04">复印件</option>
										</select>
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">档案密级程度</label>
									<div class="layui-input-inline">
										<select name="secretLevel" lay-verify="required">
											<option value="">请选择</option>
											<option value="01">普通</option>
											<option value="02">秘密</option>
											<option value="03">机密</option>
										</select>
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">借阅申请事由</label>
									<div class="layui-input-inline">
										<textarea lay-verify="required" maxlength="500"
											placeholder="请输入借阅申请事由" class="layui-textarea"
											style="width: 899px; height: 90px;" name="applyReason"></textarea>
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">档案来源</label>
									<div class="layui-input-inline">
										<select name="fromType" lay-verify="required">
											<option value="">请选择</option>
											<option value="01">建投总部</option>
											<option value="02">其他项目公司</option>
											<option value="03">本项目公司</option>
											<option value="04">本部门</option>
										</select>
									</div>
								</div>
							</div>
						</div>
			    </fieldset>			              
				<fieldset class="layui-elem-field layui-field-title fieldset" >
						<legend class="layui-btn layui-legend" style="text-align: left; cursor: default;" >档案清单 ></legend>
						<div class="layui-form-item" >
							<label class="layui-form-label" ></label>
						</div>
						<div class="contract-box" id="borrow-node">
							<div class="contract-money"    >
								<table class="layui-table" >
									<colgroup>
										<col width="90">
										<col width="300">
										<col width="300">
										<col width="300">
									</colgroup>
									<thead>
										<tr>
											<th>序号</th>
											<th>档案类型</th>
											<th>档案名称</th>
											<th></th>
										</tr>
									</thead>
									<tbody>									
									</tbody>
								</table>
							</div>
						</div>
				</fieldset>					
			<div class="layui-form-item" style="position: fixed ! important; right: 30px; bottom: 45%; z-index: 10000;">
				<div class="layui-input-block">
					<button class="layui-btn layui-bg-blue layui-btn-normal layui-btn-lg  layui-btn-radius"
						type="button" lay-submit lay-filter="addInfo_form_submit"
						id="addInfo_form_submit">
						<i class="layui-icon layui-icon-ok layuiadmin-button-btn"></i>确认提交
					</button>
				</div>
			</div>			
			</form>
		</div>
	</div>
	</div>
	<script>
	String.prototype.format = function () {
		var model = arguments;
	    return this.replace(/\{(\d+)\}/g, function (s, i) { 
	        return model[i];
	    });
	}
	
		var dataBind = function($) {
			var data = [{
				type:'1',
				name : ''
			} ];
			var templateHtml = $('#borrow-tr').html();
			var $table = $('#borrow-node').find('tbody');
			$table.empty();
			$table.on('click','.add-row',function() {
						var $row = $(this).parents('tr');
						var rowId = parseInt($row.find('.label').text()) + 1;
						var nodeTr = templateHtml.format(rowId, '');
						var $newRow = $(nodeTr);
						$row.after($newRow);
						var newIndex = $newRow.index();
						$table.find('tr:gt(' + newIndex + ')').each(function() {
								var $row = $(this);
								var rowId = parseInt($row.find('.label').text()) + 1;
								$row.find('.label').text(rowId).end().find('input[type=hidden]').val(rowId);
						});
						layui.form.render();
					}).on('click','.del-row',function() {
						var $row = $(this).parents('tr');
						if ($table.find('tr').length == 1) {
							return layer.msg('至少需保留一个子项', {
								icon : 1
							});
						}
						layui.layer.confirm('确定删除？', {
							icon : 3,
							title : '提示'
						}, function(index) {
							var i = $row.index() - 1
							$table.find('tr:gt(' + i + ')').each(
							function() {
										var $row = $(this);
										var rowId = parseInt($row.find('.label').text()) - 1;
										$row.find('.label').text(rowId).end().find('input[type=hidden]').val(rowId);
							});
							$row.remove();
							layui.layer.close(index);
						});
					});			
					for (var i = 0, j = data.length; i < j; i++) {
						var html = [], rowId = i + 1;
						var item = data[i];
						var borrowNodeTr = templateHtml.format(rowId, item.name);
						var $row = $(borrowNodeTr);							
						$row.find('select').val(item.type);				
						if (i == 0) {
							$row.find('.del-row').remove();
						}
						$table.append($row);
					}
					layui.form.render();
		}
		
		//静态资源路径前缀
		var staticPath = '${fileHttpPre}';
		var stateJSON = <infopub:dicJson groupNo="A00010028" />;

		layui.config({base : '${ctx}/resources/layuiadmin/'})
				.extend({index : 'lib/index'})
				.use(['index', 'set', 'upload', 'element', 'laydate' ],
						function() {
							var $ = layui.$, form = layui.form, element = layui.element, laydate = layui.laydate, upload = layui.upload;
							form.verify({
										CHS : [ /^[\u0391-\uFFE5]+$/, '只能输入汉字' ],
										intNumber : [ /^[1-9]\d*$/, '请输入正确的数字' ],
										floatNumber : [
												/^([-]?)([0-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/,
												'请输入正确的数字' ],
										floatAmount : [
												/^([1-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/,
												'请输入正确的数字' ]
							});
							var laydate = layui.laydate;
							laydate.render({
								elem : '#borrowStartDate',
								type : 'date',trigger: 'click' 
							});
							laydate.render({
								elem : '#borrowEndDate',
								type : 'date',trigger: 'click' 
							});
							dataBind($)
							
							form.on('submit(addInfo_form_submit)', function(data) {
								$("#addInfo_form_submit").removeAttr("lay-submit").removeClass("layui-bg-blue").addClass("layui-btn-disabled");
								//提交 Ajax 成功后，静态更新表格中的数据
					               $.ajax({
					                   type : 'post',
					         		   url : basePath + '/borrowRecord/save',
					                   data: $('#addInfo_form').serialize(),
					         		   success:function(result){
					         				if(result.success){
					         					layer.closeAll('loading'); //关闭loading
					         					layer.msg('提交单据成功~',{icon: 1});
					         					//两秒后关闭当前页面
					         					setTimeout(function(){
					         						/**
					         						 * 查找父菜单，并刷新
					         						 */
					         						var topDoc = $(window.top.document);
					         						var path = basePath + '/borrowRecord/list';
					         						// 获取页面名称
					         						var name = topDoc.find(".layui-nav-item [lay-href^='" + path + "']").text();
					         						if(name == '' || name == null){
					         							name = '档案借阅申请';
					         						}
					         						window.parent.layui.index.openTabsPage(path, name);
					         						var iframe = window.parent.layui.admin.tabsBody(window.parent.layui.admin.tabsPage.index).find(".layadmin-iframe");
					         						iframe[0].contentWindow.location.reload(true);
					         						
					         						/**
					         						 * 关闭当前页
					         						 */
					         						var currPath = basePath + '/borrowRecord/add';
					         						var layid = topDoc.find("li[lay-id^='" + currPath + "']").attr('lay-id');
					         						window.parent.layui.element.tabDelete('layadmin-layout-tabs', layid);//关闭当前页
					         				        }, 2000);
					         				}else{
					         					layer.closeAll('loading'); //关闭loading
					           					$("#addInfo_form_submit").removeClass("layui-btn-disabled").addClass("layui-bg-blue").attr("lay-submit","");
					         					layer.msg(result.msg,{icon: 7});
					         			  	}
					         			}
					              });
							});
						});
	</script>
</body>
</html>

